<template>
    <div class="header">
        <div class="header-collapse">
            <span :class="collapseIcon" @click="collapseChange"></span>
        </div>
        <div class="header-user">
            <el-dropdown @command="dropClick" class="header-user-dropdown">
                <span>您好</span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="userCenter">
                    个人中心
                </el-dropdown-item>
                <el-dropdown-item command="logOut">
                    退出
                </el-dropdown-item>
                </el-dropdown-menu>                
            </el-dropdown>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        collapseIcon:String
    },
    name: 'Header',

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        collapseChange(){
            this.$emit('collapseChange')
        },
        dropClick(command){
            if(command == 'userCenter'){
                console.log('个人中心');
            }  
            if(command == 'logOut'){
                localStorage.removeItem("userData")
                this.$router.push("/login")
                this.$message.success("您已退出当前账号！")
            }
        }
    },
};
</script>

<style lang="scss" scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    .header-collapse {
        span {
        }
    }
    .header-user {
        .header-user-dropdown {
            span {
            }
        }
    }
}
</style>